<template>
  <div class="main">
    <el-container>
      <!-- 主体部分 -->
      <el-main style="line-height:35px">
        <!-- 查询部分 -->
        <h2 style="line-height: 20px;width:100%;text-align:left">尺码管理</h2>

        <el-card class="box-card" style="margin-top:20px">
          <div>
            <div style="line-height:20px">
              <strong style="float:left">尺码管理</strong>
              <el-button
                style="float: right; padding: 3px 0"
                type="text"
                @click="addDialogFormVisible = true"
              >新增尺码</el-button>

              <!-- 新增类别弹出框 -->
              <el-dialog title="新增尺码" :visible.sync="addDialogFormVisible">
                <el-form :model="addForm">
                  <el-form-item label="尺码" :label-width="formLabelWidth">
                    <el-input v-model="addForm.size" autocomplete="off"></el-input>
                  </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                  <el-button @click="addDialogFormVisible = false">取 消</el-button>
                  <el-button type="primary" @click="add">确 定</el-button>
                </div>
              </el-dialog>
            </div>
            <!-- 显示内容表单 -->
            <div class="clear"></div>
            <el-divider></el-divider>
          </div>
          <el-table :data="tableData" border style="width: 100%;height:100%" empty-text="暂无数据">
            <el-table-column fixed prop="idsize" label="序号" height="30px"></el-table-column>
            <el-table-column fixed prop="size" label="尺码" height="30px"></el-table-column>
            <el-table-column fixed="right" label="操作" height="30px">
              <template slot-scope="scope">
                <el-button type="text" @click="open(scope.row)" size="small">删除</el-button>
                <el-button type="text" @click="editor(scope.row)" size="small">编辑</el-button>
                <!-- @click="editor(scope.$index, scope.row)" -->
                <!-- 编辑弹出框 -->
                <el-dialog
                  title="修改"
                  :visible.sync="editorDialogFormVisible"
                  :append-to-body="true"
                >
                  <el-form :model="editorForm">
                    <el-form-item label="序号" :label-width="formLabelWidth" style="width:400px">
                      <el-input v-model="editorForm.idsize" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="尺码" :label-width="formLabelWidth" style="width:400px">
                      <el-input v-model="editorForm.size" autocomplete="off"></el-input>
                    </el-form-item>
                  </el-form>
                  <div slot="footer" class="dialog-footer">
                    <el-button @click="editorDialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="change">确 定</el-button>
                  </div>
                </el-dialog>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-main>
    </el-container>
  </div>
</template>

<script>
/* eslint-disable no-unused-vars */
export default {
  data() {
    return {
      formLabelWidth: "120px",
      addDialogFormVisible: false,
      tableData: [],
      editorDialogFormVisible: false,
      editorForm: {
        idsize: "",
        size: ""
      },

      addForm: {
        size: ""
      }
    };
  },
  created() {
    this.rendering();
  },
  methods: {
    rendering() {
      this.$axios({
        url: "/Size/getSize",
        methods: "get"
      }).then(res => {
        // console.log(res);
        this.tableData = res.data;
      });
    },
    open(row) {
      // console.log(row);
      this.$confirm("您确定要删除嘛？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        // console.log(row.id);
        this.$axios({
          url: "/Size/deleteSize",
          methods: "get",
          headers: { "content-type": "application/json" },
          params: { idsize: row.idsize }
        }).then(res => {
          // console.log(res.data);
          this.rendering();
          this.$message({
            type: "info",
            message: res.data.msg
          });
        });
      });
    },
    editor(row) {
      this.editorDialogFormVisible = true;
      this.editorForm.idsize = row.idsize;
      this.editorForm.size = row.size;
    },
    change() {
      this.editorDialogFormVisible = false;
      this.$axios({
        url: "/Size/updateSize",
        methods: "get",
        headers: { "content-type": "application/json" },
        params: {
          idsize: this.editorForm.idsize,
          size: this.editorForm.size
        }
      })
        .then(res => {
          // console.log(res.data);
          this.$message({
            type: "info",
            message: res.data.msg
          });
          this.editorForm.idsize = "";
          this.editorForm.size = "";
          this.rendering();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消修改"
          });
        });
    },
    add() {
      this.addDialogFormVisible = false;
      this.$axios({
        url: "/Size/insertSize",
        methods: "get",
        headers: { "content-type": "application/json" },
        params: {
          size: this.addForm.size
        }
      }).then(res => {
        // console.log(res.data);
        this.$message({
          type: "info",
          message: res.data.msg
        });
        this.rendering();
      });
      this.addForm.size = "";
    }
  }
};
</script>

<style>
</style>